<!--  列表组件 -->
<div class="mb-md">
    <div *ngIf="showAdd">
        <div *ngFor="let s of buttons;">
            <button   *appIf="s.buttonCode" style="margin-right: 1%"   nz-button  (click)="add(s.key)"  [nzType]="'primary'" [nzSize]="'large'">
                <span>{{s.value}}</span>
            </button>
        </div>
    </div>

<!--    &lt;!&ndash;必须选中一个的时候，即数组长度大于-的时候，才会显示这一块内容，否则不显示&ndash;&gt;
    <ng-container *ngIf="!showAdd && selectedRows.length == 1 && moreData.morebutton">
        &lt;!&ndash;<button nz-button [nzSize]="'large'" class="ml-sm">批量操作</button>&ndash;&gt;
        <nz-dropdown [nzPlacement]="'bottomLeft'">
            <button nz-button nz-dropdown [nzSize]="'large'" class="ml-sm">
                更多操作 <i class="anticon anticon-down"></i>
            </button>
            <ul nz-menu>
                <li *ngFor="let b of moreData.buttons" ng-if=""  nz-menu-item (click)="moreclick(b.key)">{{b.value}}</li>
            </ul>
        </nz-dropdown>
    </ng-container>-->

</div>
<!-- 头部标题 -->
<div class="mb-md" *ngIf="showAdd">
    <nz-alert [nzType]="'info'" [nzShowIcon]="true">
        <span alert-body>
            已选择
            <strong class="text-primary">{{selectedRows.length}}</strong> 项&nbsp;&nbsp;
            总计 <strong>{{total}}</strong> 个
            <a *ngIf="selectedRows.length  > 0" (click)="clear()" class="ml-lg">清空</a>
            <a *ngIf="selectedRows.length > 1 && !isbatchDel"
               (click)="batchDel(selectedRows)"  class="ml-lg" style="color:red">批量删除</a>

        </span>

    </nz-alert>
</div>
<!-- 如果是异步的列表，必须使用nzAjaxData的-->
<nz-table #nzTable [nzAjaxData]="initDate" [nzTotal]="total"
          [nzPageSize]="q.ps"
          [nzLoading]="loading"
          (nzPageIndexChange)="pageChange($event)"
          [nzPageIndex]='pageindex'>
    <thead nz-thead>
    <tr>
        <th nz-th [nzCheckbox]="true" *ngIf="showAdd" >
            <label nz-checkbox [(ngModel)]="allChecked" [nzIndeterminate]="indeterminate" (ngModelChange)="checkAll($event)"></label>
        </th>
        <th *ngFor="let d of headerDate" nz-th>

              <span>{{d.value}}</span>
        </th>
        <th *ngIf='operate == true' nz-th >
            <span>操作</span>
        </th>
    </tr>
    </thead>
    <tbody nz-tbody>
    <!--意思是 data数据要根据表头的顺序来排列？-->
    <tr  nz-tbody-tr *ngFor="let i of nzTable.data;let l = index"  [ngStyle]="{'background-color': i.isAcitve === true ? '#ecf6fd' : '' }" >
        <td nz-td [nzCheckbox]="true" *ngIf="showAdd">
            <label nz-checkbox [nzDisabled]="i.disabled" [(ngModel)]="i.checked"  (ngModelChange)="refreshStatus($event)">
            </label>
        </td>
        <!--1、循环td，只需要循环表头，然后根据表头的索引从后台返回的数组中找就行了，找到对应索引的对应key即可，前提是表头的key必须和数组的key一致，否则会找不到
            2、加上一个span，在span里面加上一个点击事件，表头加上一个属性，是否可以点击跳转，true的时候就可以完成点击跳转
        -->
        <td *ngFor="let d of headerDate;let s = index">
            <!-- 利用ngClass 来完成是否可以点击跳转等行为 -->
            <span *ngIf='d.key !="viewRange"  && d.key !="manageableRange"  && d.key !="customRange" ' [ngClass]="{'active': d.isclick, 'noactive': !d.isclick}" class="active" (click)="isClick(d,i)">{{initDate[l][d.key]}}</span>
                 <span *ngIf="d.key == 'viewRange'">

                 <nz-checkbox-group [(ngModel)]="i.viewRange"
                    class="checkbox"
                     (ngModelChange)="_log(checkOptionsThree)"></nz-checkbox-group>
                  </span>
                    <span *ngIf="d.key == 'manageableRange'">
                    <nz-checkbox-group   class="checkbox" [(ngModel)]="i.manageableRange"  (ngModelChange)="_log(checkOptionsThree)"></nz-checkbox-group>
                     </span>
                      <span *ngIf="d.key=='customRange'">
                          <a *ngFor="let k of i.customRange;"   class="checkbox" href="{{k.url}}">{{k.label}}</a>
                     </span>
            <!--还是要写方法，因为不一定是路由跳转还有可能弹出框以及其他的交易，所以写一个方法吧
            <a *ngIf="d.isclick"  [routerLink]="['/APPlication']"  [queryParams]="data[l]">{{data[l][d.key]}}</a>-->
        </td>
        <td nz-td>
            <ng-container *ngIf="configTitle">
                <a   style="color:#108ee9;" *appIf="configTitle.buttonCode"  (click)="add(i)">{{configTitle.value}}</a>&nbsp;
            </ng-container>
            <!--查看日志详情页面-->
            <!--<a *ngIf="showAdd" style="color:#108ee9;" (click)="add(i)">{{configTitle}}</a>&nbsp;-->
            <ng-container *ngFor="let c of i.buttonData">
                <a  style="color:#108ee9;"  *appIf="c.buttonCode"  (click)="buttonClick(i, c)">{{c.value}}&nbsp;&nbsp;</a>
            </ng-container>
        </td>
    </tr>
    </tbody>
</nz-table>
